<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
	{% include 'common-css/css.html' %}
	<title>博客分类</title>
	<style type="text/css">
		a:hover {
			text-decoration: none;
		}
	</style>
</head>
<body>
<div class="div-main">
	<div>
		<div class="layui-form layui-form-pane">
			<div class="layui-row">
				<div class="layui-col-md4">
					<div class="layui-form-item">
						<label class="layui-form-label">分类名称</label>
						<div class="layui-input-inline">
							<input type="text" id="classify_name" autocomplete="off" onkeyup="query()"
							       placeholder="请输入分类名称" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-col-md2">
					<button class="layui-btn layui-btn-primary" id="add_classify">新增分类
						<i class="layui-icon">&#xe654;</i>
					</button>
				</div>
			</div>
		</div>
	</div>

	<script type="text/html" id="classify_toolbar">
		<a lay-event="del"><i class="layui-icon"> &nbsp;&nbsp;&nbsp;&nbsp;&#xe640;</i></a>
	</script>
	<table lay-filter="classify_Info" id="classify_InfoId" lay-data="{initSort:{field:'createTime', type:'desc'}}">
		<thead>
		<tr>
			<th lay-data="{field:'classify_name', width:240}">标题</th>
			<th lay-data="{field:'status', width:150}">状态</th>
			<th lay-data="{field: 'createTime',sort: true, width: 200}">创建时间</th>
			<th lay-data="{fixed: 'right', width: 200, align: 'center', toolbar: '#classify_toolbar'}">操作</th>
		</tr>
		</thead>
	</table>
	<div id="classify_Page"></div>
</div>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}layui/layui.js"></script>
<script type="text/javascript">
	layui.use(['form', 'table', 'laypage'], function () {
		var form = layui.form, table = layui.table, laypage = layui.laypage;
		var index_add_classify;
		var tmpParams = {};
		var curr = 1;
		var pageNum = 8;
		/** 打开新增文章分类 **/
		$('#add_classify').on('click', function () {
			$('#classify').val('');
			index_add_classify = layer.open({
				type: 1,
				title: '博客新增',
				offset: '80px',
				area: ['360px', '220px'],
				resize: false,
				move: false,
				content: $('#add_blog_classify')
			});
		});

		/** 保存分类 **/
		$('#save_classify').on('click', function () {
			var classify = $('#classify').val();
			if (classify == "") {
				layer.msg("请输入分类", {offset: '100px'});
				return false;
			}
			$.ajax({
				type: 'post',
				url: '/blog/add_classify',
				data: {classify: classify},
				dataType: 'json',
				success: function (data) {
					load_data(tmpParams)
					layer.msg(data.msg, {offset: '100px'});
					layer.close(index_add_classify);
				}
			});
		});

		/** 加载分类数据 **/
		load_data(tmpParams);
		function load_data(params) {
			params['limit'] = pageNum;
			params['start'] = (curr - 1) * pageNum;
			tmpParams = params;
			$.ajax({
				type: 'post',
				url: '/blog/load_classify_table',
				dataType: 'json',
				data: tmpParams,
				success: function (data) {
					table.init('classify_Info', {
						width: 795,
						data: data.data
					});
					//分页
					laypage.render({
						elem: 'classify_Page'
						, count: data.count
						, limit: pageNum
						, curr: curr
						, theme: '#999999'
						, jump: function (obj, first) {
							if (!first) {
								curr = obj.curr;
								load_data(params);
							}
						}
					});
				}
			});
		}

		/** input 模糊查询 **/
		query = function () {
			var classify_name = $('#classify_name').val();
			tmpParams = {classify_name: classify_name}
			load_data(tmpParams);
		}

		table.on('tool(classify_Info)', function (obj) {
			var data = obj.data, layEvent = obj.event;
			if (layEvent === 'del') {
				layer.confirm('确认删除【' + data.classify_name + '】？', {btn: ['确定', '取消'], offset: '10px'}, function () {
					$.ajax({
						type: 'post',
						url: '/blog/del_classify',
						data: {classify_id: data.classify_id},
						dataType: 'json',
						success: function (data) {
							layer.msg(data.msg, {offset: '100px'});
							load_data(tmpParams);
						}
					});
				}, function () {
				})
			}
		});
	});
</script>
</body>
</html>
<div id="add_blog_classify" class="layui-form layui-form-pane"
     style="padding: 10px 20px;display: none;">
	<div class="layui-form-item" style="margin-top: 20px">
		<label class="layui-form-label">类 别</label>
		<div class="layui-input-block">
			<input type="text" id="classify" autocomplete="off" placeholder="请输入博客类别" class="layui-input">
		</div>
	</div>
	<div class="layui-main" style="margin-top: 20px;width: 80px">
		<button class="layui-btn layui-btn-primary" id="save_classify">新 增
			<i class="layui-icon">&#xe618;</i>
		</button>
	</div>
</div>